<template>
  <div id="Login" ref="loginpg">
    <div class="vux-demo">
      <!-- <img class="logo" src="../assets/img/hitagileops@2x.png" /> -->
      <h1>图书信息管理系统</h1>
    </div>
    <div class="centerDiv">
      <div class="formItem">
        <img class="itemIcon" src="../assets/img/ico_user.png" />
        <input title="账号" class="input" placeholder="请输入用户名" v-model="userName" />
      </div>
      <div class="formItem">
        <img class="itemIcon" src="../assets/img/ico_password.png" />
        <input title="账号" autocomplete="new-password" class="input" type="password" placeholder="请输入密码" v-model="userPass" />
      </div>
      <div style="padding-top:15px;text-align: left;" class="checkFlag">
        <check-icon :value.sync="ChkFgtPwd"> 自动登录 </check-icon>
      </div>
    </div>
    <group style="padding-top:35px ">
      <x-button type="primary" action-type="button" @click.native="login">登录</x-button>
    </group>
  </div>
</template>

<script>
import { Group, Cell, XInput, XButton, CheckIcon } from "vux";
export default {
  components: {
    Group,
    Cell,
    XInput,
    XButton,
    CheckIcon,
  },
  data() {
    return {
      userName: "",
      userPass: "",
      menusArray: [],
      ChkFgtPwd: true,
    };
  },
  methods: {
    login() {
      if (this.userName == "" || this.userName == null) {
        this.$vux.toast.text("请输入用户名");
        return;
      }
      if (this.userPass == "" || this.userPass == null) {
        this.$vux.toast.text("请输入密码");
        return;
      }
      let formData = new FormData();
      formData.append("username", this.userName);
      formData.append("password", this.userPass);
      const _this = this;
      this.$http
        .post("/api/login", formData)
        .then((res) => {
          if (res.status == "200") {
            const data = res.data;
            if (data.code == 0) {
              if (this.ChkFgtPwd) {
                localStorage.setItem("username", this.userName);
                localStorage.setItem("password", this.userPass);
                localStorage.setItem("autoLogin", true);
              } else {
                localStorage.removeItem("username");
                localStorage.removeItem("password");
                localStorage.removeItem("autoLogin");
              }
              
              // 获取token
              this.$store.commit("updateToken", data.data);
              this.$router.push({ name: "Main", params: {} });

            } else {
              this.$vux.alert.show({
                title: "登录失败",
                content: data.message,
                onShow() {
                  console.log("Plugin: I'm showing");
                },
                onHide() {
                  console.log("Plugin: I'm hiding");
                },
              });
            }
          } else {
            this.$vux.alert.show({
              title: "登录失败",
              content: res.data.message,
              onShow() {
                console.log("Plugin: I'm showing");
              },
              onHide() {
                console.log("Plugin: I'm hiding");
              },
            });
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },

  },
  created() {
    this.$store.commit("clearnState");
    var autoLogin = localStorage.getItem("autoLogin");
    if (autoLogin) {
      this.ChkFgtPwd = true;
      //username password
      this.userName = localStorage.getItem("username");
      this.userPass = localStorage.getItem("password");
      this.login();
    } else {
      this.ChkFgtPwd = true;
    }
    //this.login();
  },
  mounted() {
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    this.$refs.loginpg.style.height = h + "px";
  },
};
</script>

<style lang="less" scoped>
.weui-btn_primary {
  background-color: #1478ee;
}
.weui-btn_primary:hover {
  background-color: #1478ee;
}
.weui-btn_primary:active {
  background-color: #1478ee;
}
.weui-btn_primary {
  background-color: #1478ee;
  &:not(.weui-btn_disabled):visited {
    color: #1478ee;
  }
  &:not(.weui-btn_disabled):active {
    background-color: #1478ee;
  }
}
#Login {
  padding-left: 40px;
  padding-right: 40px;
}

.vux-demo {
  text-align: center;
  height: 300px;
  line-height: 350px;
}
.logo {
  vertical-align: middle;
  position: static;
  max-width: 250px;
  height: 100px;
  top: -50%;
  left: -50%;
}
.formItem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  margin: 0 auto;
  margin-top: 15px;
  border-bottom: 1px solid rgba(26, 47, 66, 0.1);
}
.itemIcon {
  width: 20px;
  height: 20px;
}
.input {
  width: 100%;
  padding-left: 20px;
  text-align: left;
  border: none;
  height: 100%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: rgba(26, 47, 66, 0.3);
}
.centerDiv {
  margin: 0 auto;
  text-align: center;
  /* line-height: 85px; */
}
.centerDiv input::-webkit-input-placeholder {
  color: #b9b4b4;
}
.centerDiv input:-moz-placeholder {
  color: #b9b4b4;
}
.centerDiv input:-ms-input-placeholder {
  color: #b9b4b4;
}
.centerDivBtn {
  margin: 0 auto;
  text-align: center;
  line-height: 85px;
}
.centerDivBtn button {
  height: 50px;
  width: 75%;
  margin: 0 auto;
  background: white;
  border: 2px white solid;
  font-size: 25px;
  border-radius: 5px;
  color: #2f5dbf;
  letter-spacing: 8px;
}
.rightDiv {
  margin: 0 auto;
  text-align: right;
  height: 50px;
}
.rightDiv img {
  margin-right: 12.5%;
  height: 25px;
}
#lblImg {
  font-size: 20px;
  color: white;
  padding-right: 5px;
  margin-top: -6px;
}
.vux-check-icon > .weui-icon-success-circle {
  font-size: 23px;
  color: #2f5dbf !important;
}
.weui-icon-success {
  font-size: 23px;
  color: #2f5dbf !important;
}
.vux-check-icon > .weui-icon-success:before,
.vux-check-icon > .weui-icon-success-circle:before {
  color: #2f5dbf !important;
}
.checkFlag {
  color: #2f5dbf !important;
}
</style>
